<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>x5.layer测试</title>
</head>
<body>
        <p>x5.layer测试</p>
    <div style="position: relative;">
        <div id="player"></div>
        <div style="position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(255,255,0,.5);pointer-events: none;">播放器覆盖层测试(黄色)</div>
    </div>

    <div style="width: 100%; height: 200px; border: 1px solid red; margin-top: 10px; overflow-y: auto;">
        <p>div内滚动测试</p><p>div内滚动测试</p><p>div内滚动测试</p>
        <p>div内滚动测试</p><p>div内滚动测试</p><p>div内滚动测试</p>
        <p>div内滚动测试</p><p>div内滚动测试</p><p>div内滚动测试</p>
        <p>div内滚动测试</p><p>div内滚动测试</p><p>div内滚动测试</p>
    </div>

    <div style="width: 100%; height: 200px; border: 1px solid red; margin-top: 10px;">document滚动测试</div>
    <div style="width: 100%; height: 200px; border: 1px solid red; margin-top: 10px;">document滚动测试</div>
    <div style="width: 100%; height: 200px; border: 1px solid red; margin-top: 10px;">document滚动测试</div>
    <div style="width: 100%; height: 200px; border: 1px solid red; margin-top: 10px;">document滚动测试</div>
    <div style="width: 100%; height: 200px; border: 1px solid red; margin-top: 10px;">document滚动测试</div>

    <script src="https://static.mudu.tv/mudu-player/0.27.0/mudu-player.min.js"></script>
    <script>
        var player = muduPlayer('player')
        player.setup({
            file: 'https://myun-hw-s3.myun.tv/n856xo5m/1535512040681946728_284_480p.m3u8',
            width: '100%',
            aspectratio: '16:9',
            plugin: {x5: {layer: true}}
        })
    </script>
</body>
</html>